<template>
    <el-dialog :close-on-click-modal="false"  ref="dialogform" title="阶段排序" :visible.sync="dialogVisible" width="80%" :before-close="handleClose">
        <el-form :model="ruleForm" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-form-item label="选择品种" prop="plantVarietyId">
                <el-select v-model="ruleForm.plantVarietyId" class="w100p" filterable placeholder="请选择养殖品种"
                    @change="queryGrowthStage">
                    <el-option v-for="item, index in varietyList" :key="index" :label="item.plantVarietyName"
                        :value="item.plantVarietyId"></el-option>
                </el-select>
            </el-form-item>
            <div class="growthStage">
                <draggable v-model="growthStageList" class="drag-area" :animation="200">
                    <div v-for="(item, index) in growthStageList" :key="index" class="drag-item"
                        :style="{ width: `calc(100% / ${growthStageList.length} - 10px)`, height: '200px' }">
                        <el-image class="elImg" :style="{ width: '100%', height: '200px' }"
                            :src="getImgUrl(item.fileId)" fit="scale-down"></el-image>
                        <div class="name">{{ item.growStageName }}</div>
                    </div>
                </draggable>
            </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import draggable from 'vuedraggable';
import growthStageDivision from '@/api/basicInformation/growthStageDivision.js';
export default {
    components: { draggable },
    props: {
        dialogVisible: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        varietyList: {
            type: Array,
            default: () => {
                return []
            }
        },
    },
    data() {
        return {
            ruleForm: {},
            growthStageList: []
        }
    },
    computed: {

    },
    watch: {
        dialogVisible(v) {
            this.ruleForm = {};
            this.growthStageList = [];
        }
    },

    mounted() { },
    methods: {
        getImgUrl(id) {
            if (id) {
                return `${this.$baseurl.fileServiceUrl}fish/public/files/download?fileId=${id}`
            } else {
                return ''
            }
        },
        async queryGrowthStage(plantVarietyId) {
            this.growthStageList = []
            let { data: growthStageList } = await growthStageDivision.queryByCondition({ plantVarietyId: plantVarietyId })
            this.growthStageList = growthStageList || []
            if (this.growthStageList.length == 0 || !this.growthStageList) {
                this.$message.warning('该品种没有创建阶段')
            }
        },
        submitForm() {
            if (this.ruleForm.plantVarietyId) {
                let growStageId = this.growthStageList.map(item => { return item.growStageId })
                if (growStageId.length > 0) {
                    growthStageDivision.saveSort(growStageId).then(res => {
                        console.log(res)
                        if (res.code == 1) {
                            this.cancel();
                            this.$message.success('阶段排序成功');
                        } else {
                            this.$message.warning('阶段排序失败');
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                } else {
                    this.$message.warning('该品种没有创建阶段')
                }
            } else {
                this.$message.warning('请先选择品种')
            }

        },
        //取消关闭
        cancel() {
            this.ruleForm = {};
            this.growthStageList = [];
            this.$emit("closeDialog")
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => { this.cancel() })
                .catch(_ => { });
        }
    }
};
</script>
<style lang="scss" scoped>
.drag-area {
    display: flex;
    justify-content: space-between;

    .drag-item {
        margin: 0 auto;
        text-align: center;
    }
}
</style>